<template>
	<view class="pd16_15">
		
		<view class="box over-hide">
			<view class="recharge-header">
				<image :src="statics.moneyRecharge"></image>
				<view class="main pd24_20">
					<view class="ft16 cl-w9">当前余额</view>
					<view class="mt16 ftw600 ft32 cl-w">{{userinfo.money}}</view>
				</view>
			</view>
			<navigator url="/pages/client/vipcard/moneylog">
				<view class="pd16_15 flex alcenter space">
					<text class="ft14 ftw600 cl-main">余额明细</text>
					<text class="iconfont iconicon_arrow_circle ft20" :style="{color:tempColor}"></text>
				</view>
			</navigator>
		</view>
		
		<radio-group  @change="changeNum">
			<view class="flex wrap space mt16">
				<view v-for="(item,index) in moneyList" :key="index"  :class="index > 1 ? 'mt16' : ''" class="box pd20_15 flex alcenter space" style="width: 330rpx;">
					<text class="ft16 cl-main ftw600">¥{{item.num}}</text>
					<radio :value="item.num" :checked="num == item.num"  :color="tempColor" />
				</view>
			</view>
		</radio-group>
		
		<view v-if="getCoupon > 0" class="mt16 tag-coupon" :style="getTagStyle">
			送价值{{getCoupon}}元优惠券
		</view>
		<!-- <view class="list-call" style="margin-top: 40upx;">
		  <input class="sl-input tdadf" v-model="numa" type="number" placeholder="自定义金额" />
		</view> -->
		<view class="form-footer-h">
			<view class="form-footer form-footer-h">
				<view class="form-footer-main pd10_15">
					<button style="width: 49%; float: left;" @click="paykami" class="btn-big">卡密充值</button>
					<button style="width: 49%; float: right;" @click="paySuccess" class="btn-big" :style="getBtnStyle">支付 ¥{{num}}</button>
				</view>
			</view>
		</view>
		<hFormAlert v-if="cancelShow" title="卡密充值"  name="cancel_desc" placeholder="请输入卡密卡号" @confirm="confirm" @cancel="cancel"></hFormAlert>
		<dialog-couponshare v-if="showCouponInvite" @closed="closedInvite"></dialog-couponshare>
	</view>
</template>

<script>
	import hFormAlert from '@/components/h-form-alert/h-form-alert.vue';
	export default{
		components: {hFormAlert},
		data(){
			return {
				num:'10',
				moneyList:[
					{num:'10',coupon:0},
					{num:'20',coupon:0},
					{num:'50',coupon:0},
					{num:'100',coupon:0},
					{num:'200',coupon:0},
					{num:'300',coupon:0},
					{num:'500',coupon:0},
					{num:'1000',coupon:0},
				],
				numa:'',
				userinfo:'',
				showCouponInvite:false,
				cancelShow:false,
			}
		},
		computed:{
			getCoupon(){
				for(var  a in this.moneyList){
					if(this.moneyList[a].num == this.num){
						return this.moneyList[a].coupon;
					}
				}
				return 0;
			}
		},
		onLoad(){
			this.userinfo=uni.getStorageSync("userinfo")
			
		},
		onShareAppMessage(e){
			
		},
		onShareTimeline(e){
			
		},
		methods:{
			changeNum(e){
				this.num = parseInt(e.detail.value);
			},
			paykami(){
				this.cancelShow=true
			},
			cancel(){
				this.cancelShow=false
			},
			confirm(e){
				console.log(e.cancel_desc);
				if(!e.cancel_desc){
					this.cancelShow=false
					uni.showToast({ title: '请输入卡密',icon:"none" });
					return false
				}
				let data = {};
				data.token = uni.getStorageSync("userinfo").token;
				data.uid = uni.getStorageSync("userinfo").id;
				data.crd = e.cancel_desc;
				
				uni.request({
					url: this.configs.webUrl+'/api/user/kami',
					data: data,
					success: res =>{
						if(res.data.code==1){
							this.userinfo.money=res.data.data.userinfo.money
							uni.showToast({ title: res.data.msg,icon:"none" });
						}else{
							uni.showToast({ title: res.data.msg,icon:"none" });
						}
					},
					fail: (data, code) => {
						//console.log('fail' + JSON.stringify(data));
					}
				});	
				this.cancelShow=false
			},
			
			paySuccess(){
				//this.showCouponInvite = true;
				uni.navigateTo({
					url:'/pages/client/vipcard/adviser'
				})
			},
			closedInvite(){
				this.showCouponInvite = false;
				let pages = getCurrentPages();
				uni.navigateBack({
					delta:pages.length
				});
			}
		}
	}
</script>

<style>
	.tag-coupon{
		width: 100%;
		height: 80rpx;
		border-radius: 16rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
	}
	.recharge-header{
		height: 240rpx;
		width: 100%;
		position: relative;
	}
	.recharge-header image{
		width: 100%;
		height: 240rpx;
	}
	.recharge-header .main{
		position: absolute;
		width: 100%;
		height: 240rpx;
		left: 0;
		top: 0;
	}
	.tdadf{
		border: 1px solid #f8f8f8; padding: 10px 5px; background: #ffffff; border-radius: 8px; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.04);
	}
</style>